<div id="contact" v-cloak>
  <div purpose="page-container" class="container-fluid">
    <div class="d-flex flex-lg-row flex-column justify-content-center">
    <div purpose="form-container" v-if="!cloudSuccess">
      <h2>Get in touch</h2>
      <p v-if="userHasPremiumSubscription" style="margin-bottom: 40px;">Dedicated professional support from the Fleet team.</p>
      <p v-else-if="psychologicalStage === '4 - Has use case'">Let us help you deploy and evaluate Fleet quickly for yourself. We’d love to save you some time.</p>
      <p v-else-if="psychologicalStage === '5 - Personally confident'">Schedule a personalized demo for your team and get support or training.</p>
      <p v-else>Schedule a personalized demo, or ask us anything. We’d love to chat.</p>
      <div purpose="contact-form-switch" class="d-flex flex-sm-row flex-column justify-content-center mx-auto" v-if="!userHasPremiumSubscription">
        <div purpose="switch-option" :class="[formToDisplay === 'talk-to-us' ? 'selected' : '']" @click="clickSwitchForms('talk-to-us')">Get a demo</div>
        <div purpose="switch-option" :class="[formToDisplay === 'contact' ? 'selected' : '']" @click="clickSwitchForms('contact')">Send a message</div>
        <div purpose="switch" :class="formToDisplay+'-selected'"></div>
      </div>
      <div v-if="formToDisplay === 'contact'">


        <div purpose="note" v-if="!userIsLoggedIn">
          <div>
            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
          </div>
          <p>Already a Fleet customer? <a href="/login#contact">Sign in</a> for Premium support</p>
        </div>

        <div purpose="note" v-if="userIsLoggedIn && !userHasPremiumSubscription">
          <div>
            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
          </div>
          <p>Already a Premium customer? Reach out to us directly or use the form below.</p>
        </div>


        <ajax-form action="deliverContactFormMessage" class="contact" :form-errors.sync="formErrors" :form-data="formData" :form-rules="contactFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedContactForm()">
          <div class="form-group">
            <label for="contact-email-address">Work email *</label>
            <input class="form-control" id="contact-email-address" name="email-address" type="email" :class="[formErrors.emailAddress ? 'is-invalid' : cloudError && cloudError === 'invalidEmailDomain' ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
            <div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid work email address</div>
            <cloud-error class="p-0 mt-1 mb-0 bg-transparent invalid-feedback" v-if="cloudError && cloudError === 'invalidEmailDomain'">
              <p>Please enter a valid email address</p>
            </cloud-error>

          </div>
          <div class="form-group">
            <div class="row">
              <div purpose="first-name-column" class="col-sm mb-4 mb-sm-0">
                <label for="contact-first-name">First name *</label>
                <input class="form-control" id="contact-first-name" name="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="given-name">
                <div class="invalid-feedback" v-if="formErrors.firstName">Please let us know what to call you.</div>
              </div>
              <div purpose="last-name-column" class="col-sm">
                <label for="contact-last-name">Last name *</label>
                <input class="form-control" id="contact-last-name" name="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="family-name">
                <div class="invalid-feedback" v-if="formErrors.lastName">Please let us know what to call you.</div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="message">Message *</label>
            <textarea class="form-control" id="message" name="message" :class="[formErrors.message ? 'is-invalid' : '']" v-model.trim="formData.message" autocomplete="none"></textarea>
            <div class="invalid-feedback" v-if="formErrors.message">Message cannot be empty.</div>
          </div>
          <cloud-error v-if="cloudError && cloudError !== 'invalidEmailDomain'"></cloud-error>
          <div class="form-group btn-container">
            <ajax-button purpose="submit-button" type="submit" :syncing="syncing" class="btn btn-primary">Send</ajax-button>
          </div>
        </ajax-form>
      </div>
      <div v-else>
        <ajax-form :handle-submitting="handleSubmittingTalkToUsForm" class="contact" :form-errors.sync="formErrors" :form-data="formData" :form-rules="talkToUsFormRules"  :cloud-error.sync="cloudError">
          <div class="form-group">
            <label for="email-address">Work email *</label>
            <input class="form-control" id="email-address" name="email-address" type="email" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
            <div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid work email address</div>
            <cloud-error class="p-0 mt-1 mb-0 bg-transparent invalid-feedback" v-if="cloudError && cloudError === 'invalidEmailDomain'">
              <p>Please enter a valid work email address</p>
            </cloud-error>
          </div>
          <div class="form-group">
            <div class="row">
              <div purpose="first-name-column" class="col-sm mb-4 mb-sm-0">
                <label for="first-name">First name *</label>
                <input class="form-control" id="first-name" name="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="given-name">
                <div class="invalid-feedback" v-if="formErrors.firstName">Please let us know what to call you.</div>
              </div>
              <div purpose="last-name-column" class="col-sm">
                <label for="last-name">Last name *</label>
                <input class="form-control" id="last-name" name="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="family-name">
                <div class="invalid-feedback" v-if="formErrors.lastName">Please let us know what to call you.</div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="organization">Organization *</label>
            <input class="form-control" id="organization" name="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" autocomplete="email">
            <div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
          </div>
          <div class="form-group" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" >
            <label class="mb-3"><strong>What will you be using Fleet for? *</strong></label>
            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'it-major-mdm' ? 'selected' : '']">
              <input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="it-major-mdm">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              Device management (MDM)
            </label>
            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'it-gap-filler-mdm' ? 'selected' : '']">
              <input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="it-gap-filler-mdm">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              Linux management
            </label>
            <label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'security-misc' ? 'selected' : '']">
              <input type="radio" v-model.trim="formData.primaryBuyingSituation" value="security-misc">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              Security engineering
            </label>
            <div class="invalid-feedback" v-if="formErrors.primaryBuyingSituation">Please select an option</div>
          </div>
         <div class="form-group">
           <label for="number-of-hosts">How many employees are in your organization? *</label>
           <input class="form-control" id="number-of-hosts" name="number-of-hosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : '']" min="1" v-model.trim="formData.numberOfHosts">
           <!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="!primaryBuyingSituation || ['eo-it', 'mdm', 'vm'].includes(primaryBuyingSituation)">Includes computers, servers, phones, and more.</p>
           <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'eo-security'">Includes servers, supercomputers, and everything else.</p> -->
           <!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'eo-it'">Includes Apple, Windows, Linux workstations, Chromebooks, servers, and other hosts. </p> -->
           <!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'mdm'">Includes Apple, Windows, and desktop Linux. Android coming soon.</p> -->
           <!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'vm'">Includes computers, servers, OT/ICS, containers, and other hosts.</p> -->
           <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of employees</div>
         </div>
         <cloud-error v-if="cloudError && cloudError === 'invalidEmailDomain'">
           <p>Please enter a valid work email address</p>
         </cloud-error>
          <cloud-error v-if="cloudError && cloudError !== 'invalidEmailDomain'"></cloud-error>
          <div class="form-group btn-container">
            <ajax-button type="submit" purpose="submit-button" :syncing="syncing" class="btn btn-primary">Schedule a call</ajax-button>
          </div>
        </ajax-form>
      </div>
    </div>
    <div purpose="success-message" v-else>
      <h2>Thank you!</h2>
      <p class="mt-3">A member of our team will get back to you soon.<br>Usually within one business day (or less!)</p>
    </div>
    <div purpose="quote-and-logos">
      <div purpose="quote" v-if="primaryBuyingSituation === 'security-vm'">
        <div purpose="logo" class="mb-4"><img height="32" alt="Rivian logo" src="/images/logo-rivian-dark-120x32@2x.png"></div>
        <p purpose="quote-text">
          The visibility down into the assets covered by the agent is phenomenal. Fleet has become the central source for a lot of things.
        </p>
        <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
          <div purpose="profile-picture">
            <img alt="Andre Shields" src="/images/testimonial-author-andre-shields-48x48@2x.png">
          </div>
          <div class="d-flex flex-column align-self-top">
            <p purpose="name" class="font-weight-bold m-0">Andre Shields</p>
            <p purpose="job-title" class="m-0">Staff Cybersecurity Engineer, Vulnerability Management</p>
          </div>
        </div>
      </div>
      <div purpose="quote" v-else-if="primaryBuyingSituation === 'it-misc'">
        <div purpose="logo" class="mb-4"><img height="32" alt="Deputy logo" src="/images/social-proof-logo-stripe-67x32@2x.png"></div>
        <p purpose="quote-text">
          Mad props to how easy making a deploy pkg of the agent was. I wish everyone made stuff that easy.
        </p>
        <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
          <div purpose="profile-picture">
            <img alt="Wes Whetstone" src="/images/testimonial-author-wes-whetstone-48x48@2x.png">
          </div>
          <div class="d-flex flex-column align-self-top">
            <p purpose="name" class="font-weight-bold m-0">Wes Whetstone</p>
            <p purpose="job-title" class="m-0">Staff CPE</p>
          </div>
        </div>
      </div>
      <div purpose="quote" v-else-if="primaryBuyingSituation === 'security-misc'">
        <div purpose="logo" class="mb-4"><img height="32" alt="Deloitte logo" src="/images/social-proof-logo-deloitte-130x32@2x.png"></div>
        <p purpose="quote-text">
          Something I really appreciate about working with you guys is that it doesn't feel like I'm talking to a vendor. It actually feels like I'm talking to my team, and I really appreciate it.
        </p>
        <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
          <div purpose="profile-picture">
            <img alt="Chandra Majumdar" src="/images/testimonial-author-chandra-majumdar-48x48@2x.png">
          </div>
          <div class="d-flex flex-column align-self-top">
            <p purpose="name" class="font-weight-bold m-0">Chandra Majumdar</p>
            <p purpose="job-title" class="m-0">Partner - Cyber and Strategic Risk</p>
          </div>
        </div>
      </div>
      <div purpose="quote" v-else>
        <div purpose="logo" class="mb-4"><img height="32" alt="Stripe logo" src="/images/social-proof-logo-stripe-67x32@2x.png"></div>
        <p purpose="quote-text">
          We've been using Fleet for a few years at Stripe and we couldn't be happier. The fact that it's also open-source made it easy for us to try it out, customise it to our needs, and seamlessly integrate it into our existing environment.
        </p>
        <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
          <div purpose="profile-picture">
            <img alt="Scott MacVicar" style="border-radius: 50%" src="/images/testimonial-author-scott-macvicar-100x100@2x.png">
          </div>
          <div class="d-flex flex-column align-self-top">
            <p purpose="name" class="font-weight-bold m-0">Scott MacVicar</p>
            <p purpose="job-title" class="m-0">Head of Developer Infrastructure &amp; Corporate Technology</p>
          </div>
        </div>
      </div>
      <div purpose="logos" class="flex-column flex-wrap align-items-center">
        <logo-carousel></logo-carousel>
      </div>
    </div>
  </div>
  </div>
  <p style="opacity: 0; line-height: 0px; font-size: 0px; margin: 0;">537c652d-cb1a-440e-ae35-0f0bf5743e75</p>
  <signup-modal></signup-modal>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
